ツリ〖妨及のリンクを斧やすくする

海搀は、涟搀疽拆した≈ツリ〖妨及のリンク∽をもっと斧やすくする数恕を疽拆します。この侯度は斧た誊だけを恃构すればよいため、JavaScriptを恃构する涩妥はありません。称超霖に努碰なスタイルシ〖トを纳裁するだけで≈ツリ〖妨及のリンク∽を斧やすくできます。

まずは、称超霖に改侍のクラスを回年します。ここでは、惧の超霖に"level0"、布の超霖に"level1"というクラス叹を回年しました。このとき、惧の超霖∈ⅶで幌まる矢机∷にDIVタグを纳裁し、class掳拉を回年できるようにしておきます。

<DIV class="level0">
ⅶ<A href="javaScript:tree('infoseek')">Infoseek</A><BR>
</DIV>
<DIV id="infoseek" class="level1" style="display:none">
≥<A href="http://www.infoseek.co.jp/">トップペ〖ジ∈浮瑚∷</A><BR>
≥<A href="http://news.www.infoseek.co.jp/">ニュ〖ス</A><BR>
≥<A href="http://tenki.www.infoseek.co.jp/">欧丹</A><BR>
≥<A href="http://tv.www.infoseek.co.jp/">TV戎寥山</A><BR>
≥<A href="http://dictionary.www.infoseek.co.jp/">辑今</A><BR>
</DIV>

<DIV class="level0">
ⅶ<A href="javaScript:tree('rakuten')">弛欧</A><BR>
</DIV>
<DIV id="rakuten" class="level1" style="display:none">
≥<A href="http://www.rakuten.co.jp/">トップペ〖ジ</A><BR>
≥<A href="http://furima.rakuten.co.jp/">フリマ</A><BR>
≥<A href="http://www.rakuten.co.jp/auction/">ス〖パ〖オ〖クション</A><BR>
≥<A href="http://www.rakuten.co.jp/groupbuy/">鼎票关掐</A><BR>
≥<A href="http://event.rakuten.co.jp/present/">伏巨辉眷</A><BR>
≥<A href="http://event.rakuten.co.jp/ranking/">ランキング辉眷</A><BR>
</DIV>

鲁いて、称超霖の今及をスタイルシ〖トで淡揭します。惧の超霖は、DIVタグの"level0"クラスとなるため、DIV.level0{∧∧∧}で今及を回年します。笆布の毋では、矢机サイズ14ポイント、吕机、惧の嘲婶途球15ピクセル、矢机咖をオレンジに回年しました。
<STYLE type="text/css"> DIV.level0{ font-size:14pt; font-weight:bold; margin-top:15px; color:#FF9933; } </STYLE>

票屯に、布の超霖の今及はDIV.level1{∧∧∧}で今及を回年します。笆布の毋では、矢机咖をオレンジ、矢机サイズ10ポイント、玻升200ピクセル、焊の嘲婶途球30ピクセル、柒婶途球10ピクセルとし、焊娄と布娄に2ピクセルの爬俐を闪茶しました。これで≈ツリ〖妨及のリンク∽がもっと斧やすく山绩されます。もちろん、それぞれの今及は称极が攻きなようにデザインすることが材墙ですし、さらに布の超霖を崔む眷圭は、DIV.level2{∧∧∧}などを淡揭するとその今及を回年できます。

<STYLE type="text/css">
DIV.level0{
font-size:14pt;
font-weight:bold;
margin-top:15px;
color:#FF9933;
}
DIV.level1{
color:#FF9933;
font-size:10pt;
width:200px;
margin-left:30px;
padding:10px;
border-left:dashed 2px #FFCC99;
border-bottom:dashed 2px #FFCC99;
}
</STYLE>

僥儗儚乕僋側傜EC僫價 Yahoo 妝揤 LINE偑僨乕僞徚旓僛儘偱寧妟500墌乣両
 柍椏儂乕儉儁乕僕柍椏偺僋儗僕僢僩僇乕僪奀奜奿埨峲嬻寯丂奀奜椃峴曐尟偑柍椏両奀奜儂僥儖